import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// layout布局组件是所有二级路由的父亲，无论什么时候都需要加载出来的，所以不选用路由懒加载模式
import Layout from '@/Layout/index.vue';
import NotFound404 from '@/views/404.vue';

const router = createRouter({
  // 路由模式，hash history
  history: createWebHistory(), // createWebHistory()
  routes: [
    // { path: '/', component: Home }, 路由组件导入的时候，推荐使用路由懒加载 () => import('xxxxx')
    // 要区分一级和二级路由， 有上下左右结构的，有layout组件包裹的就是二级路由，代码里面就要写children。 像登录页面是一个独立页面，不需要写layout
    {
      path: '/',
      redirect: '/workbench',
    },
    {
      path: '/login',
      component: () => import('../views/Login/index.vue'),
    },
    // 添加月卡
    {
      path: '/car/addMonthCard',
      component: () => import('@/views/AddMonthCard/index.vue'),
    },
    // 编辑月卡    获取动态参数 this.$route.params.id
    //            获取query参数 this.$route.query.id    /a/b/c?id=xxxx
    {
      path: '/car/editMonthCard/:id',
      component: () => import('@/views/AddMonthCard/index.vue'),
    },
    // 查看月卡
    {
      path: '/car/viewMonthCard/:id',
      component: () => import('@/views/AddMonthCard/index.vue'),
    },
    // 续费月卡
    {
      path: '/car/renewMonthCard/:id',
      component: () => import('@/views/AddMonthCard/index.vue'),
    },
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '/workbench',
          component: () => import('@/views/Workbench/index.vue'),
        },
        {
          path: '/park/building',
          component: () => import('@/views/Building/index.vue'),
        },
        // 月卡管理
        {
          path: '/car/monthCard',
          component: () => import('@/views/MonthCard/index.vue'),
        },
        // 区域管理
        {
          path: '/car/area',
          component: () => import('@/views/CarArea/index.vue'),
        },
        // 停车缴费管理
        {
          path: '/car/pay',
          component: () => import('@/views/CarPay/index.vue'),
        },
        // 计费规则
        {
          path: '/car/billing',
          component: () => import('@/views/CarBilling/index.vue'),
        },
      ],
    },
    // 所有路由最后，写一个兜底的路由
    {
      // path: '*',  路由3.x版本的， 我们应该用4.x版本的  正则匹配
      path: '/:pathMatch(.*)*',
      component: NotFound404,
    },
  ],
});

export default router;
